<template>
    <div class="course_detail">
        <!--        <y-watch-video  v-if="courseInfo.isPay" :courseInfo="courseInfo" @playfunc="videoPlay" :nowNo="nowPeriodNo" ref="watchVideo"></y-watch-video>-->
        <y-watch-video  :classData="classData" @playfunc="videoPlay" :nowNo="nowPeriodNo" ref="watchVideo" ></y-watch-video>
        <!--        <y-display v-else :courseInfo="courseInfo" ref="watchVideo"></y-display>-->
        <!--        中间-->
        <y-display :classData="classData" :ChildId="ChildId" :isTitileUpdate="isTitileUpdate" :isFree="isFree" :videoId="videoId" @TeacherVideoStatus="TeacherVideoStatus"></y-display>

        <div class=" detail_info detail_box clearfix">
            <div class="layout_left">
                <ul class="course_tab clearfix">
                    <li :class="{on: tab == 'info'}"><a href="javascript:" @click="tab = 'info'">客户评价</a></li>
                </ul>
                <div class="content_info" v-if="tab == 'info'">
                    <y-syllabus  @playfunc="videoPlay" :ChapterData="ChapterData" @FuChuanZi="FuChuanZi" @UpdateStatus="UpdateStatus" @updateIsFree="updateIsFree" @updateVideoId="updateVideoId" :TeacherStatus="TeacherStatus"></y-syllabus>
                    <!--                    课程大纲-->
                </div>
                <!--                    <y-syllabus @playfunc="videoPlay" :list="courseInfo.chapterList" :nowNo="nowPeriodNo"></y-syllabus>-->

            </div>
            <div class="layout_right">
                <div class="teacher_info clearfix">
                    <span class="head">店铺介绍</span>
                    <div class="teacher_msg">
                        <div class="teacher_msg_right">
                            <div class="teacher_name">
                                <router-link :to="{path: '/teacherXinX',query:{teacherId:classData.sid}}">{{classData.name}}</router-link>
<!--                                <el-button type="danger" icon="el-icon-circle-plus-outline" size="mini" @click="guanzhudianpu" class="guanzhu">关注店铺</el-button>-->
                                <a href="javascript:" class="guanzhu"  @click="deleteshouChang"  v-if="guanzhuStatus===1">  <span class="iconfont mgr10" style="color: gainsboro">&#xe60a;</span>&nbsp;已关注</a>
                                <a href="javascript:" class="guanzhu"  @click="guanzhudianpu()" v-else><span class="iconfont mgr10" style="color: red">&#xe60a;</span>&nbsp;关注店铺</a>
                            </div>
                            <p>这是一家正经的水果蔬菜店铺</p>
                            <div v-html="classData.intro" class="info_box"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
    import YDisplay from "@/components/course/Display"
    import YSyllabus from "@/components/course/Syllabus"
    import YWatchVideo from '@/components/course/WatchVideo'
    import result from "../../../config";
    export default {
        name: "DetailId",
        components: {
            YDisplay,
            YSyllabus,
            YWatchVideo,
        },
        data() {
            return {
                //课程和教师数据
                tab: 'info',
                //当前播放章节
                nowPeriodNo: '',
                classData: {
                    num: 0,
                },
                // id:'1301034714081005570'
                id: this.$route.params.id,
                ChapterData: {},
                //孩子传过来的id
                ChildId: '',
                videoId: '',

                isFree: false,
                isTitileUpdate: false,
                TeacherStatus: false,
                //关注的实体类
                guanZhuData: {
                    teacherid: '',
                    memberid: window.sessionStorage.getItem("memberId"),
                },
                guanZhuStatus: 0,
                timer: null,
                sid:0,
                name:"",
                guanzhuStatus:0,

            }
        },
        created() {
            this.queryClassAndTeacher();
            clearTimeout(this.timer);  //清除延迟执行
            this.timer = setTimeout(() => {   //设置延迟执行
                this.findChapterById();
            }, 1000);


        },

        methods: {
            selectDianpu(){
                this.sid=this.classData.sid;
                this.name=this.classData.name;
                this.$http.post("/system/shop/selectAttention/"+this.sid).then(result=>{
                    console.log(this.sid);
                    console.log(this.name);
                    if (result.data.code===2000){
                        this.guanzhuStatus=1;
                    }else {
                        this.$message.success(result.data.msg);
                    }

                })
            },
            //取消关注店铺
            deleteshouChang(){
                this.sid=this.classData.sid;
                this.$confirm('确定取消关注此店铺吗?, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("/system/shop/deleteAttention/"+this.sid).then(result=>{
                        if(result.data.code===2000){
                            this.$message.success(result.data.msg);
                            this.guanzhuStatus=0;
                        }else {
                            this.$message.error(result.data.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消关注'
                    });
                });
            },
            //关注店铺
            guanzhudianpu() {
                console.log(this.classData);
                this.sid=this.classData.sid;
                this.name=this.classData.name;
                this.$confirm('确定关注此店铺吗?, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("/system/shop/attention/"+this.sid+"/"+this.name).then(result=>{
                        if(result.data.code===2000){
                            this.$message.success(result.data.msg);
                            this.guanzhuStatus=1;
                        }else {
                            this.$message.error(result.data.msg);
                        }
                     })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消关注'
                    });
                });

            },
            //父传子
            UpdateStatus(isTitileUpdate) {
                this.isTitileUpdate = isTitileUpdate;
                // alert(this.isTitileUpdate)

            },
            FuChuanZi: function (videoSourceId) {
                // childValue就是子组件传过来的值
                this.ChildId = videoSourceId

            },
            TeacherVideoStatus(TeacherVideoStatus) {
                this.TeacherStatus = TeacherVideoStatus;

            },
            //是否免费
            updateIsFree(isFree) {
                this.isFree = isFree;
                // alert(this.isFree)
            },
            //VideoId
            updateVideoId(val) {
                this.videoId = val;
                // alert(this.videoId)
            },
            videoPlay(data) {
                if (this.courseInfo.isPay || data.isFree) {
                    window.scrollTo(0, 0)
                    this.nowPeriodNo = data.id
                    chapterSign({
                        ip: 'string',
                        periodId: data.id,
                        videoVid: data.videoVid
                    }).then(res => {
                        res = res.data
                        this.isResetVideo = false
                        if (res.code === 200) {
                            this.play(Object.assign({vid: data.videoVid}, res.data));
                        } else if (res.code === 402) {
                            this.$msgBox({
                                content: '购买后才可以观看',
                                isShowCancelBtn: false
                            })
                        }
                    }).catch(() => {
                        this.isResetVideo = false
                    })
                } else {
                    this.$msgBox({
                        content: '购买后才可以播放',
                        isShowCancelBtn: false
                    })
                    return false;
                }
            },
            //根据课程id查询学生和教师信息
            queryClassAndTeacher() {
                this.$http.post("/system/shop/findByZidAll/" + this.id).then(resp=> {
                    if (resp.data.code === 2000) {
                        console.log(resp)
                        this.classData = resp.data.data;
                        this.selectDianpu();
                        //that.guanZhuData.teacherid=resp.data.result.teacherId;
                        // that.teacherVideoID=that.guanZhuData.teacherid;
                        //that.queryGuanZhuById();

                    }

                    // console.log(that.guanZhuData.teacherid)
                })
            },
            //根据课程id查询章节和课时信息
            findChapterById() {
                var that = this;
                this.$http.post("/comment/clientComments/selectAll/" + this.classData.id + "/" + this.classData.sid).then(function (resp) {
                    if (resp.data.code === 2000) {
                        // console.log(resp)
                        that.ChapterData = resp.data.data;
                    }
                })
            }

        }
    }
</script>

<style lang="scss" rel="stylesheet/scss">
    .course_detail{
        .detail_info {
            margin: 20px auto 60px;
            width: 1200px;
        }
        .layout_left {
            width: 920px;
            float: left;
            .info_body {
                margin-bottom: 30px;
            }

        }
        .course_tab{
            padding-left: 30px;
            background: #fff;
            border-radius: 8px;
            margin-bottom: 20px;
            li {
                float: left;
                height: 66px;
                line-height: 66px;
                margin-right: 80px;
                &.on {
                    border-bottom: 2px solid #D51423;
                    a {
                        color: #D51423;
                    }
                }
                a {
                    color: #000;
                    font-size: 14px;
                    font-weight: 700;
                    &:hover {
                        text-decoration: none;
                        color: #D51423;
                    }
                }
            }
        }
        .content_info{
            padding: 30px;
            background: #fff;
            border-radius: 8px;
            min-height: 400px;
            .title {
                border-left: 3px solid #000;
                padding-left: 12px;
                font-size: 16px;
                color: #000;
                font-weight: 700;
                margin-bottom: 25px;
            }
            .introduce{
                font-size: 14px;
                line-height: 30px;
                color: #333;
                padding-left: 8px;
            }
        }
        .layout_right{
            width: 260px;
            float: right;
        }
        .teacher_info {
            background: #fff;
            border-radius: 8px;
            position: relative;
            min-height: 180px;
            .head {
                display: block;
                line-height: 60px;
                height: 60px;
                padding-left: 20px;
                font-size: 14px;
                color: #333;
                border-bottom: 1px solid rgb(228, 228, 228);
            }
            .teacher_phone {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                background: rgb(228, 228, 228);
                text-align: center;
                line-height: 46px;
                font-size: 13px;
                color: #999;
                float:left;
                margin: 0px 10px 0 10px;
                img {
                    width: 46px;
                    height: 46px;
                    border-radius: 50%;
                }
            }
            .teacher_msg_right {
                width: 235px;
                float: right;
                margin: 12px 15px 12px 12px;
                line-height: 20px;
            }
            .teacher_name {
                font-size: 14px;
                font-weight: 700;
                color: #333;
                margin-bottom: 10px;
            }
            .guanzhu{
                margin-left: 20px;
            }
        }
    }
</style>